<template>
  <div class="nav-head">
    <div class="nav-logo">
        <a href="https://www.gitee.com/fang-shengyu" target="_blank">
            <img src="../../assets/navlogo.png" alt="">
        </a>
    </div>
    <div class="nav-exit">
        <div class="admin-info">
            <img src="../../assets/logo.png" alt="">
            <span>admin</span>
        </div>
        <el-badge :value="messagenum" class="item">
            <el-button type="primary" plain @click="pushmessageitem"><el-icon><Message /></el-icon></el-button>
        </el-badge>
        <el-popconfirm title="Are you sure logout?"
        @confirm="logout">
            <template #reference>
                <el-button class="exitbutton" type="primary" plain>退出登录</el-button>
            </template>
        </el-popconfirm>
        
    </div>
    <!-- 发送信息item -->
    <div class="messageitem" v-show="ismessage" >
        <el-row>
            <el-col :span="24" class="messtitle"><h3>Message send</h3></el-col>
        </el-row>
        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>
        <el-row>
            <el-col :span="24"><el-input v-model="messagername" placeholder="请输入姓名" class="inputname"/></el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-input v-model="textarea" :rows="2" type="textarea" 
                :autosize="{ minRows: 4, maxRows: 4 }"
                maxlength="50"
                show-word-limit
                placeholder="请输入消息"
                class="inputtext"/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="inputtime">
                <!-- 设置format/value-format属性更改选择时间格式 -->
                <el-date-picker v-model="messagetime" type="datetime" 
                placeholder="选择日期时间" 
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm"></el-date-picker>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24"><el-button type="success" @click="pushmessage"><el-icon><ChatDotRound/></el-icon>发 送</el-button></el-col>
        </el-row>
        
        
        
        
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import {
  Message,
  ChatDotRound,
  StarFilled
} from '@element-plus/icons-vue' 

import operate from '@/utils/operate'

export default {
    inject: ['reload'],
    name: 'navbar',
    components: {
        Message,
        ChatDotRound,
        StarFilled
    },
    data() {
        return {
            // messagenum: JSON.parse(localStorage.getItem('messagelist')).length,
            messagenum: 0,
            ismessage: false,
            messagetime: new Date(),
            messagername: '',
            textarea: '',
            messagelist: []
        }
    },
    beforeMount(){
        let checkmessagelist = JSON.parse(localStorage.getItem('messagelist'))
        
        
        if(checkmessagelist){
            this.messagelist = JSON.parse(localStorage.getItem('messagelist'))
            let checkismessagenum = checkmessagelist.length
            if(checkismessagenum){
            this.messagenum = checkismessagenum
        }
        }
        // this.messagelist = JSON.parse(localStorage.getItem('messagelist'))
    },
    methods: {
        // changeday(val) {
        //     return this.dayjs(val).format('YYYY-MM-DD HH:mm:ss')
        // },
        logout() {
            //删除本地数据中的token
            localStorage.removeItem('token')
            //返回login登录页面
            this.$router.push('/login')
        },
        pushmessageitem() {
            this.ismessage = !this.ismessage
        },
        pushmessage() {
            if(this.messagetime == ''||this.messagername == ''||this.textarea == ''){
                ElMessage({
                    message: '请输入相关信息',
                    type: 'warning',
                })
            }else {
                // console.log(this.messagetime)
                let messageinfo = {
                    messagername: this.messagername,
                    messagetime: this.messagetime,
                    textarea: this.textarea
                }
                this.messagelist.push(messageinfo)
                console.log(this.messagelist)
                ElMessage({
                    message: '发送成功！',
                    type: 'success',
                })
                operate('admin',"发送信息")
                this.ismessage = !this.ismessage
                localStorage.setItem('messagelist',JSON.stringify(this.messagelist))
                this.reload()
            }
            
        }
    }
}
</script>

<style scoped>
    .nav-head {
        display: flex;
        width: 100%;
        display: inline-block;
        box-shadow: 2px 2px 5px #ccc;
    }
    .nav-logo{
        float: left;
    }
    .nav-exit{
        margin-top: 50px;
        margin-right: 50px;
        float: right;
    }
    .admin-info {
        display: inline-block;
        position: relative;
        margin-right: 20px;
    }
    .admin-info img {
        position: relative;
        top: 13px;
        margin-right: 10px;
        width: 40px;
        height: 40px;
    }
    .admin-info span {
        display: inline-block;
        width: 70px;
        text-align: center;
        border-radius: 8px;
        background-color: rgb(197, 220, 255);
    }
    .nav-exit button {
        
        width: 100px;
        height: 40px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
    }
    .nav-exit .exitbutton {
        margin-left: 20px;
    }
    .messageitem {
        position: absolute;
        width: 620px;
        height: 350px;
        background-color: #fff;
        box-shadow: 2px 2px 4px #ccc;
        border-radius: 10px;
        top: 120px;
        right: 100px;
        z-index: 100;
    }
    .el-row {
    margin-bottom: 15px;
    }
    /* .el-row:last-child {
    margin-bottom: 0;
    } */
    .el-col {
    border-radius: 4px;
    }
    .el-col .el-button{
        width: 150px;
        /* height: 50px; */
        margin-left: 38%;
    }
    .messtitle {
        margin-top: 10px;
        margin-left: 10px;
        color:lightskyblue;
    }
    .inputtime {
        margin-left: 10px;
        width: 300px;
    }
    .inputname {
        width: 600px;
        margin-left: 10px;
        margin-top: 10px;
    }
    .inputtext {
        margin-left: 10px;
        width: 600px;
    }
</style>